<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/5/26
  Time: 15:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="p" uri="/xianzhiOA/powerTag" %>
<html>
<head>
    <title>权限一览</title>
    <style>
        table{ border:0;border-collapse:collapse;}
        td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
        th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
        .parent{ background:#FFF38F;cursor:pointer;}  /* 偶数行样式*/
        .odd{ background:#FFFFEE;}  /* 奇数行样式*/
        .selected{ background:#FF6500;color:#fff;}
    </style>
    <script type="text/javascript" src="${pageContext.request.contextPath}/dist/backEnd/js/jquery-2.1.1.min.js"></script>
    <script type="application/javascript">
        function deleteCheck(powerId) {
            if(confirm("确定要删除吗？")){
                 window.location.href="${pageContext.request.contextPath}/Xzpower/deletePower.emp?powerId="+powerId;
            }
        }
    </script>
</head>
<body>
<!--头部开始-->
<jsp:include page="headerBack.jsp"></jsp:include>
<!-- 导航 -->
<jsp:include page="leftBack.jsp"></jsp:include>
<!--内容页-->
<div class="main">
    <!--内容页头部-->
    <div class="page-header">
        <div class="pull-left">
            <ol class="breadcrumb visible-sm visible-md visible-lg">
                <li><a href="index.html"><i class="icon fa fa-home"></i>主页</a></li>
                <li class="active"><i class="fa fa-pencil"></i>权限显示</li>
            </ol>
        </div>
        <div class="pull-right">
            <h2>主页</h2>
        </div>
    </div>
    <form class="search1" action="${pageContext.request.contextPath}/Xzpower/toaddPower.emp">
        <p:power jspPower="权限设置：添加">
            <button type="submit" class="three btn btn-primary">添加</button>
        </p:power>
        <!--表格-->
        <div class="well">
            <table class="table" id="now">
                <thead>
                <tr>
                    <th class="d">权限名</th>
                    <th class="d">权限类型</th>
                    <th class="d">权限字符</th>
                    <p:power jspPower="权限设置：修改">
                        <th class="dd">修改</th>
                    </p:power>
                    <p:power jspPower="权限设置：删除">
                        <th class="dd">删除</th>
                    </p:power>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="power" items="${powerList}">
                    <c:choose>
                     <c:when test="${power.superNo == '0'}">
                         <tr  class="parent" id="${power.powerType}">
                     </c:when>
                      <c:otherwise>
                          <tr class="child_${power.powerType}">
                      </c:otherwise>
                    </c:choose>
                        <%--<td style="display: none">${power.powerId}</td>--%>
                        <td>${power.powerName}</td>
                        <td>${power.powerType}</td>
                        <td>${power.powerCode}</td>
                          <p:power jspPower="权限设置：修改">
                        <td><a href="${pageContext.request.contextPath}/Xzpower/toEditPowerPage.emp?powerId=${power.powerId}"><li class="fa fa-pencil"></li></a></td>
                          </p:power>
                          <p:power jspPower="权限设置：删除">
                          <td><a onclick="deleteCheck(${power.powerId})"><li class="fa fa-times"></li></a></td>
                          </p:power>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </form>
</div>

<script type="text/javascript">
    $(function(){
        $('tr.parent').click(function(){   // 获取所谓的父行
            $(this)
                .toggleClass("selected")   // 添加/删除高亮
                .siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行
        });
    })

</script>
</body>
</html>
